<template>
	<view class="content">
		<!-- <view class="top">
			<view class="title">
				{{title}}
			</view>
		</view> -->
		<view class="merchant-box">
			<view class="merchant-bg">
				<view class="merchant-img">
					<u-image width="100%" height="100%" :src="merchantInfo.url" shape="circle"></u-image>
				</view>
				<view class="merchant-text">
					<view class="merchant-title">
						{{merchantInfo.name}}
					</view>
					<view class="merchant-addr">
						{{merchantInfo.addr}}
					</view>
				</view>
			</view>
		</view>
		<view class="form-box">
			<text class="main-color">支付金额</text>
			<view class="input-box" style="line-height: 2rem;">
				<text>￥</text>
				<view style="flex-grow: 1;display: flex;">
					<!-- <u-input v-model.number="payVal" :type="type" :border="border" placeholder="请输入金额" /> -->
					<text class="pay-val">{{payVal}}</text>
					<text style="color: #aaa;" v-if="$System.isEmpty(payVal)">请输入金额</text>
				</view>
				<u-icon v-if='payVal' name="delete2" custom-prefix="custom-icon" size="40" color="#bababa"
					@click="delPayVal" />
			</view>
			<view>
				<!-- #ifdef H5 -->
				<view class="pay-box" v-if="payMethod.length>0 && $System.getEnv() == 'h5'">
					<myRadioPay v-model="payWay" :options="payMethod" />
				</view>
				<!-- #endif -->
			</view>
			<view class="remark-box">
				<view v-if="!$System.isEmpty(payRemark)" class="remark-content">
					<text class="main-color">备注:</text>
					{{payRemark}}
				</view>
				<view class="remark-btn">
					<text @click="showRemarkBtn('add')" class="main-color" v-if="$System.isEmpty(payRemark)">添加备注</text>
					<text @click="showRemarkBtn('update')" class="main-color" v-if="!$System.isEmpty(payRemark)">
						<u-icon name="edit-pen"></u-icon>
						修改备注
					</text>
					<u-icon v-if='!$System.isEmpty(payRemark)' name="shanchu" custom-prefix="custom-icon" size="40"
						color="#bababa" @click="payRemark=''" />
				</view>
			</view>
			<view style="width: 100%;flex-grow: 1;">
				<!-- <view class="confirm-btn" @click="confirm()">
					确认支付
				</view> -->
				<!-- <u-button type="warning" @click="confirm()" v-if="commonStore.deviceInfo?.tradeAmt">确认支付</u-button> -->
			</view>
		</view>
		<jiaPayKeyboard style="height: 30vh;z-index: 1; " :overlayClose="false" ref="keyWord" v-model="payVal"
			@confirm="confirm()" :confirmText='"支付"'
			:confirmStyle="!$System.isEmpty(payVal)?{backgroundColor:$System.maiColor}:{backgroundColor:'#bababa'}">
		</jiaPayKeyboard>
		<!-- <view class="foot">
			<foot-box />
		</view> -->
	</view>
	<u-modal v-model="showRemark" title='备注信息' class=" modal-remark" :show-confirm-button='false'>
		<view style="padding:32rpx">
			<u-input v-model="modalRemark" type='textarea' maxlength='100' border placeholder='请输入备注内容' />
		</view>
		<view class='modal-btn' style="
			display: flex;
			margin-bottom: 20rpx;
			justify-content: space-between;
			padding:0 32rpx">
			<u-button size="medium" shape="circle" type='confirmModal' class="confirmModal"
				@click="sureModal">确认</u-button>
			<u-button size="medium" shape="circle" @click="cancelModal">取消</u-button>
		</view>
	</u-modal>
</template>
<script setup name='Register'>
	import jiaPayKeyboard from '@/uni_modules/jia-PayKeyboard/components/jia-PayKeyboard/jia-PayKeyboard.vue'
	import {
		reactive,
		toRefs,
		ref,
		toRaw,
		computed,
		getCurrentInstance,
		onMounted,
		nextTick,
	} from 'vue'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import footBox from '@/components/foot-box/index.vue'
	import myRadioPay from '@/components/my-radio-pay/index.vue'
	import {
		loading,
		wxPayHandler,
		payHandler,
		wxPayH5,
		alPayH5
	} from '@/common/pay.js'
	import {
		useCommonStore
	} from '@/stores/common.js'
	import {
		objToParams
	} from '@/common/common.js'

	const {
		proxy
	} = getCurrentInstance()
	const commonStore = useCommonStore()
	const openid = computed(() => commonStore.openid)

	const merchantInfo = computed(() => {
		let obj = {
			name: commonStore.merchantInfo.merchantName || '门店名称',
			addr: commonStore.merchantInfo.addr || '门店地址',
			url: commonStore.merchantInfo.url || '/static/images/default_head2.png',
		}
		return obj
	})
	const payVal = ref('')
	const type = ref('digit')
	const border = ref(false)
	const payMap = ref({
		weixin: '微信',
		alipay: '支付宝',
		yinlian: '银联',
	})
	const payWay = ref('')
	const payMethod = ref([])

	onLoad(async (options) => {
		// console.log('支付页options===>', options);
		if (options.payVal) {
			payVal.value = options.payVal
		}

		payMethod.value = await commonStore.getChannelList()
		// console.log('payMethod.value==>', payMethod.value);
		// 获取默认PayWay
		payWay.value = commonStore.getPayWay()
		// alert('22222==>' + Date.now())
		if (proxy.$System.isEmpty(commonStore.deviceInfo?.tradeAmt)) {
			nextTick(() => {
				keyWord.value.open()
			})
		} else {
			// alert(commonStore.openid)
			payWay.value = commonStore.getPayWay()
			payVal.value = commonStore.deviceInfo?.tradeAmt
			nextTick(() => {
				confirm()
			})
		}
	})

	const payWayObj = computed(() => {
		let obj = payMethod.value.filter(e => e.payWay == payWay.value)
		return obj[0]
	})

	function radioGroupChange(e) {
		// console.log('e==>', e);
		// console.log('obj==>', payWayObj.value);
	}

	function getIcon(name) {
		return `/static/images/${name}.svg`
	}

	function delPayVal() {
		console.log('点击了');
		payVal.value = ''
	}

	/* 备注 */
	const modalRemark = ref('')
	const payRemark = ref('')
	const showRemark = ref(false)
	const showRemarkBtn = (val) => {
		if (val == 'update') {
			modalRemark.value = payRemark.value
		} else {
			modalRemark.value = ''
		}
		showRemark.value = true
	}
	// 确定
	const sureModal = () => {
		payRemark.value = modalRemark.value
		showRemark.value = false
	}
	// 取消
	const cancelModal = () => {
		showRemark.value = false
	}
	/* 备注 */

	function goto() {
		// h5跳转微信支付宝小程序
		if (!payWay.value) {
			uni.showModal({
				content: "请选择支付方式",
				showCancel: false
			})
			return
		}
		let query = encodeURIComponent(objToParams({
			payVal: payVal.value,
			...commonStore.deviceInfo
		}))
		let toList = {
			alipay: `alipays://platformapi/startapp?appId=2021005137689978&page=pages/index/index&query=${query}`,
			weixin: `weixin://dl/business/?appid=wx5e92ef1fb50210c7&path=pages/index/index&query=${query}&env_version=trial`,
			// weixin: `weixin://dl/business/?appid=wx99c87aaf47af44e3&path=pages/index/index&query=${query}&env_version=trial`, //正式版为release，体验版为trial，开发版为develop
		}
		// console.log('env===>', toList[payWayObj.value.name]);
		window.location.href = toList[payWayObj.value.name]
		// proxy.$System.goTo('/pages/after-pay/index')
	}

	const keyWord = ref()
	onMounted(() => {
		// 判断是否官网商城过来的订单
		// if (proxy.$System.isEmpty(commonStore.deviceInfo?.tradeAmt)) {
		// 	nextTick(() => {
		// 		keyWord.value.open()
		// 	})
		// } else {
		// 	payWay.value = commonStore.getPayWay()
		// 	payVal.value = commonStore.deviceInfo?.tradeAmt
		// 	nextTick(() => {
		// 		confirm()
		// 	})
		// }
	})

	async function confirm() {
		if (!payVal.value) {
			// uni.showModal({
			// 	content: "请输入金额",
			// 	showCancel: false
			// })
			return
		} else {
			const reg = /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/
			if (!reg.test(payVal.value)) {
				uni.showModal({
					content: "请输入合法的金额数字，最多两位小数",
					showCancel: false
				})
				return
			}
		}

		if (proxy.$System.isEmpty(payWay.value)) {
			uni.showModal({
				content: "请选择支付方式",
				showCancel: false
			})
			return
		}

		// 下单数据
		let data = {
			...payWayObj.value,
			payWay: payWay.value,
			payType: '1', //支付方式：线上、线下
			payUserId: openid.value,
			tradeAmt: (payVal.value * 100).toFixed(0),
			userRemark: payRemark.value,
			// mId: Math.random().toString(36).substr(2, 7),
			subject: `${commonStore.merchantInfo.storeAbbrName}商品`,
			// body: '11111',
		}

		if (proxy.$System.getEnv() == 'mp-weixin') {
			wxPayHandler(data)
		} else if (proxy.$System.getEnv() == 'mp-alipay') {
			payHandler(data)
		} else if (proxy.$System.getEnv() == 'h5-weixin') {
			wxPayH5(data)
		} else if (proxy.$System.getEnv() == 'h5-alipay') {
			alPayH5(data)
		} else if (proxy.$System.getEnv() == 'h5') {
			goto()
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff !important;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 96vh;
		background-image: url(@/static/images/head_background.png);
		background-size: 100%;
		background-repeat: no-repeat;
		background-color: #fff !important;
	}

	.merchant-box {
		padding: 20rpx;
		width: 100%;

		.merchant-bg {
			display: flex;
			align-items: center;
			width: 100%;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 32rpx;


			.merchant-img {
				width: 100rpx;
				height: 100rpx;
			}

			.merchant-text {
				line-height: 1.5em;
				padding-left: 20rpx;
			}
		}
	}

	.merchant-title {
		font-size: 1.1em;
		font-weight: bold;
	}

	.merchant-addr {
		font-size: .9em;
		color: #666;
	}

	.form-box {
		padding: 64rpx;
		width: 100%;
		flex-grow: 1;
		background-color: #fff;
		border-radius: 32rpx;

		.input-box {
			width: 100%;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #efefef;
			margin-bottom: 32rpx;
			font-size: 48rpx;
			padding-top: 32rpx;
		}

		.remark-box {
			width: 100%;
			padding: 10rpx;
			background-color: #F6F7F8;
			border-radius: 12rpx;
			margin-top: 32rpx;

			.remark-content {
				word-break: break-all;
				margin-bottom: 32rpx;
			}

			.remark-btn {
				display: flex;
				justify-content: space-between;
			}
		}
	}

	.pay-val {
		vertical-align: middle;
	}

	.pay-val:after {
		content: '|';
		animation: blink 1s infinite;
	}

	@keyframes blink {

		0%,
		50%,
		100% {
			opacity: 1;
		}

		50.001%,
		99.999% {
			opacity: 0;
		}
	}

	.modal-remark {
		.modal-btn-box {
			padding-bottom: 32rpx;
		}

	}

	.confirm-btn {
		border-color: var(--maiColor);
		background-color: var(--maiColor);
		color: #fff;
		text-align: center;
		border-radius: 16rpx;
		padding: 28rpx;
	}

	.confirmModal,
	:deep(.u-btn--confirmModal) {
		background-color: var(--maiColor) !important;
		color: #fff !important;
		border-radius: 100rpx;
	}

	.modal-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		// border: 1px solid #F6F7F8;
		border-radius: 50%;
	}

	.top {
		width: 100%;
		text-align: center;
		background-color: var(--maiColor);
		color: #fff;
		border-radius: 0 0 150rpx 150rpx;
	}

	.title {
		font-size: 36rpx;
		line-height: 150rpx;
		height: 150rpx;
	}

	.foot {
		padding-top: 80rpx;
		position: relative;
		z-index: 0;
	}
</style>